<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import FileUpload from "@/components/file-system/file-upload.vue";
import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import { 
  enclosureParkBarriersSaveOrUpdateUsingPost,
  jeecgbootSysPermissionAdd,
  jeecgbootSysPermissionGetSystemMenuList,
  jeecgbootSysPermissionEdit

 } from "@/genapi/wh-yqd";
import { useAsync } from "@/hooks/use-async";
import FileOtherUpload from "@/components/file-system/file-otherUpload.vue";
import { ref } from "vue";
import {
	getEnumOptionsField,
	GATE_STATUS_OPTIONS,
  MENU_SORT_OPTIONS,
  PERMS_TYPE_OPTIONS,
  IS_TLEAF_OPTIONS,
  IS_RULEFLAG_OPTIONS,
  BUTTON_STATUS_OPTIONS,
  IS_DELETE_OPTIONS,
  IS_ROUTE_OPTIONS,
  IS_KEEPALIVE_OPTIONS,
  INTERNALOREXTERNAL_OPTIONS,
  TYPE_OPTIONS
} from "@/config/enum-options";

import { injectState } from "../state";

defineOptions({ name: "DetailDialog" });

const img = import.meta.glob("./assets/*.png", {
	import: "default",
	eager: true,
});

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const type = ref<"write" | "read" | "create">();

const beforeClose = async () => {
	if (type.value === "write") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (_type: "write" | "read" = "read", value = {} as any) => {
	type.value = _type;
  // console.log(value)
  if(type.value === 'read'){
    console.log('分配权限')

  }
	model.value = JSON.parse(JSON.stringify(value)) as any;
  console.log(model.value)
	await dialogRef.value?.open();
};
const model = ref<(typeof page.records.value)[0]>({});
defineExpose({
	trigger
});


const value = ref("");

const file = computed({
	get() {
		if (model.value.fileId) {
			return [
				{
					id: model.value.fileId,
					name: model.value.fileName,
				},
			];
		}
	},
	set(value: any) {
		model.value.fileId = value?.[0]?.id;
	},
});
const isShow = ref(false)
const title = computed(() => {
	if (type.value === "write") {
    console.log(type.value)
    isShow.value = true
		return "编辑"
	}else if(type.value === "create"){ 
    isShow.value = true
    return "新建"
  } else {
    isShow.value = false
		return `分配权限`;
	}
});

const { execute, isLoading } = useAsync(async () => {
	await formDescRef.value?.formRef?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});

	await enclosureParkBarriersSaveOrUpdateUsingPost({
		data: {
			...model.value,
		},
	});
	ElMessage.success("提交成功");
	page.execute();
	dialogRef.value?.complete();
});
const selectOptions = ref([{ label: "员工", value: "1" }]);

function getCurrentDate(): string {
	const now = new Date();
	const year = now.getFullYear();
	const month = String(now.getMonth() + 1).padStart(2, "0");
	const day = String(now.getDate()).padStart(2, "0");

	return `${year}-${month}-${day}`;
}
model.value.time = getCurrentDate();
const children: FormDescChild[] = [
	{
		label: "菜单名称",
		prop: "status",
		rule: [{ required: false, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.name} placeholder="请输入" />
		),
		descItem: () => `${model.value.name ?? "-"}`
	},
  {
		label: "id",
		prop: "id",
		rule: [{ required: false, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.id} placeholder="请输入" />
		),
		descItem: () => `${model.value.id ?? "-"}`
	},
	{
		label: "菜单权限编码",
		prop: "perms",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.perms} placeholder="请输入" />
		),
		descItem: () => `${model.value.perms ?? "-"}`,
	},
	{
		label: "权限策略",
		prop: "permsType",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.permsType}
				options={PERMS_TYPE_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () => getEnumOptionsField(PERMS_TYPE_OPTIONS, "label", model.value.permsType) ??
    "-",
	},
	{
		label: "组件",
		prop: "component",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.component} placeholder="请输入" />
		),
		descItem: () => `${model.value.component ?? "-"}`,
	},
	{
		label: "组件名字",
		prop: "componentName",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.componentName} placeholder="请输入" />
		),
		descItem: () => `${model.value.componentName ?? "-"}`,
	},
	{
		label: "路径",
		prop: "url",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.url} placeholder="请输入" />
		),
		descItem: () => `${model.value.url ?? "-"}`,
	},
	{
		label: "一级菜单跳转地址",
		prop: "redirect",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.redirect} placeholder="请输入" />
		),
		descItem: () => `${model.value.redirect ?? "-"}`,
	},
	{
		label: "菜单排序",
		prop: "sortNo",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.sortNo}
				options={MENU_SORT_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(GATE_STATUS_OPTIONS, "label", model.value.sortNo) ??
			"-",
	},
  {
		label: "是否叶子节点",
		prop: "leaf",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.leaf}
				options={IS_TLEAF_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(IS_TLEAF_OPTIONS, "label", model.value.leaf) ??
			"-",
	},
  {
		label: "类型",
		prop: "menuType",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.menuType}
				options={TYPE_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(TYPE_OPTIONS, "label", model.value.menuType) ??
			"-",
	},
  {
		label: "是否路由菜单",
		prop: "route",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.route}
				options={IS_ROUTE_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(IS_ROUTE_OPTIONS, "label", model.value.route) ??
			"-",
	},
  {
		label: "是否缓存页面",
		prop: "keepAlive",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.keepAlive}
				options={IS_KEEPALIVE_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(IS_KEEPALIVE_OPTIONS, "label", model.value.keepAlive) ??
			"-",
	},
  {
		label: "描述",
		prop: "description",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.description} placeholder="请输入" />
		),
		descItem: () => `${model.value.description ?? "-"}`,
	},
  {
		label: "创建人",
		prop: "createBy",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.createBy} placeholder="请输入" />
		),
		descItem: () => `${model.value.createBy ?? "-"}`,
	},
  {
		label: "删除状态",
		prop: "delFlag",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.delFlag}
				options={IS_DELETE_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(IS_DELETE_OPTIONS, "label", model.value.delFlag) ??
			"-",
	},
  {
		label: "是否配置菜单的数据权限",
		prop: "ruleFlag",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.ruleFlag}
				options={IS_RULEFLAG_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(IS_RULEFLAG_OPTIONS, "label", model.value.ruleFlag) ??
			"-",
	},
  {
		label: "是否隐藏路由菜单",
		prop: "hidden",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.hidden}
				options={IS_RULEFLAG_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(IS_RULEFLAG_OPTIONS, "label", model.value.hidden) ??
			"-",
	},
  {
		label: "是否隐藏Tab",
		prop: "hideTab",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.hideTab}
				options={IS_RULEFLAG_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(IS_RULEFLAG_OPTIONS, "label", model.value.hideTab) ??
			"-",
	},
  {
		label: "按钮权限状态",
		prop: "status",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.status}
				options={BUTTON_STATUS_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(BUTTON_STATUS_OPTIONS, "label", model.value.status) ??
			"-",
	},
  {
		label: "外链菜单打开方式",
		prop: "internalOrExternal",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.internalOrExternal}
				options={INTERNALOREXTERNAL_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(INTERNALOREXTERNAL_OPTIONS, "label", model.value.internalOrExternal) ??
			"-",
	},
];
//新建确认按钮发送请求
const addconfirm = async (val:any) => {
  let res = await jeecgbootSysPermissionAdd(val)
  console.log(res)
  dialogRef.value?.close()
  page.execute()
  ElMessage.success(res.message)
}
//编辑表格的确认按钮
const onEdit = async (val:any) => {
  // console.log(val)
  let res = await jeecgbootSysPermissionEdit(val)
  console.log(res)
  await dialogRef.value?.close()
  page.execute()
  ElMessage.success(res.message)
}

// interface Option {
// 	key: number;
// 	label: string;
// 	disabled: boolean;
// }
const generateData =  () => {
  const data = []
  jeecgbootSysPermissionGetSystemMenuList().then((res) => {
    // console.log(res.result)
    for (let i = 1; i <= res.result.length; i++) {
		data.push({
			key: i,
			label: `${res.result[i].title}`,
			// disabled: i % 4 === 0,
		});
    // console.log(data)
	}
  })
	// const data: Option[] = [];

	return data;
};
const getData = () => {
  
}

// const data = ref<Option[]>(generateData());
  const data = ref(generateData());
const value1 = ref([]);
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="title"
		:before-close="beforeClose"
		w="630px!"
	>
		<el-scrollbar style="height: 358px">
			<FormDesc
				ref="formDescRef"
				m="t-24px x-30px"
				:type="type === 'read' ? 'desc' : 'form'"
				form-class="gap-x-20px"
				:model="model"
				:children="children"
				:column="2"
        v-if="isShow"
			/>
			<el-transfer
      v-else
				v-model="value1"
				:data="data"
				:titles="['权限列表', '已分配权限']"
			/>
		</el-scrollbar>
    <!-- 新建按钮 -->
		<template v-if="type === 'create'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="addconfirm(model)"
				>确定</el-button
			>
		</template>
    <!-- 编辑按钮 -->
		<template v-else-if="type === 'write'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="onEdit(model)"
				>确认</el-button
			>
		</template>
     <!-- 分配权限按钮 -->
    <template v-else-if="type === 'read'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" 
				>确认</el-button
			>
		</template>
	</PromiseDialog>
</template>

<style lang="scss" scoped>
.trainingListBox {
	width: 100%;
	padding: 0px 30px;
	.listBoxTitle {
		height: 50px;
		width: 100%;
		display: flex;
		align-items: center;
	}
}
</style>